<template>
	<view>
		<Header title="操作手册" :showBack="true"></Header>
		<view class="container">
			<view class="box">
				<block v-for="(item,index) in list" :key="index" >
					<view class="card" @click="toPath(item.url)">
						<view class="avatar-box">
							<image class="avatar" src="../../static/help_header01.png" mode="widthFix"></image>
						</view>
						<view class="right-box">
							<view>{{item.title}}</view>
							<image class="go-url" src="../../static/go.png" mode="widthFix"></image>
						</view>
					</view>
				</block>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{ title:'签约流程', url:'/pages/help/howSign' },
					{ title:'限购操作', url:'/pages/help/howLimit' },
				]
			}
		},
		methods: {
			toPath(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.box{
	background: #fff;
	// box-shadow: 0 0 15upx rgba(247, 200, 122, .2);
	box-shadow: 0 3upx 20upx 1upx rgba(247, 200, 122, .2);
	border-radius: 16upx;
	padding: 20upx 0 860upx;
}
.card{
	// background: #d2f4ec;
	background: rgba(255, 146, 0, 0.1);
	width: 93%;
	height: 106upx;
	line-height: 106upx;
	border-radius: 10upx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 0 30upx;
	margin: auto;
	
	.avatar-box{
		width: 40upx;
		height: 40upx;
		border-radius: 50%;
		margin-right: 16upx;
		display: flex;
		.avatar{
			width: 60upx;
			height: 60upx;
			vertical-align: middle;
		}
	}
	.right-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 446upx;
		.go-url{
			width: 20upx;
			height: 20upx;
		}
	}
}
.card~.card{
	margin-top: 20upx;
}
</style>